<script setup>
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { adminLoginService } from '@/api/auth'
import { useUserStore } from '@/stores'
import { onBeforeRouteLeave, useRouter } from 'vue-router'

/* 外部依赖 */
const userStore = useUserStore()
const router = useRouter()

/* 切换路由前执行 */
const isAnimating = ref(false);

onBeforeRouteLeave((to, from, next) => {
  isAnimating.value = true;
  setTimeout(() => {
    isAnimating.value = false;
    next();
  }, 1200);
});

/* 登录 */
const form = ref()

const formModel = ref({
  name: '',
  password: '',
})

const rules = {
  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

const login = async () => {
  await form.value.validate()
  const res = await adminLoginService(formModel.value)
  userStore.setToken(res.data.data);
  userStore.clearPermissions();
  router.push('/')
}
</script>

<template>
  <!-- 
  el-row：一行（一行分成24份）
  el-col：一列
    （1）:span="12" 代表在一行中占12份[50%]
    （2）:offset="3" 代表在一行中, 左侧margin占3份
  el-form：整个表单组件
  el-form-item：表单的一行（一个表单域）
  el-input：表单元素

  （1）el-form => :model="ruleForm" 绑定整个form的数据对象
  （2）el-form => :rules="rules" 绑定整个rules规则对象
  （3）表单元素 => v-model="ruleForm.xxx" 给表单元素, 绑定form的子属性
  （4）el-form-item => prop 配置生效的是哪个校验规则 
  -->

  <div class="login-page">
    <div class="left-bg" :class="{ 'left-fade-out': isAnimating }"></div>
    <div class="right-form" :class="{ 'right-fade-out': isAnimating }">
      <!-- 登录表单 -->
      <el-form :model="formModel" :rules="rules" ref="form" size="large" autocomplete="off" @submit.prevent>
        <el-form-item prop="name">
          <el-input
            v-model="formModel.name"
            @keyup.enter="login"
            :prefix-icon="User"
            placeholder="用户名"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formModel.password"
            @keyup.enter="login"
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login" auto-insert-space>
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '../../assets/theme-mixins.scss' as *;
::v-deep(.el-input__inner::placeholder) {
  color: black;
  font-weight: bold;
}
::v-deep(.el-input__prefix .el-icon) {
  color: black;
}
.left-fade-out {
  animation: moveLeft 1s ease-in-out forwards;
}
.right-fade-out {
  opacity: 0;
  pointer-events: none;
}
.login-page {
  @include theme-variant(background, login-right-bg);
  position: relative;
  width: 100vw;
  height: 100vh;
  .left-bg {
    @include theme-variant(background, login-left-bg);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    border-radius: 0 20px 20px 0;
  }
  .right-form {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25%;
    height: 100%;
    padding: 0 12.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
    .title {
      margin: 0 auto;
    }
    .el-input {
      animation: fadeIn 0.5s ease-in-out;
      transition: all 0.3s ease-in-out;

      &:hover {
        background-color: rgb(171, 171, 171);
        box-shadow: var(--el-box-shadow-light);
      }
    }
    .el-button {
      margin-top: 20px;
      width: 100%;
      color: rgb(94, 94, 94);
      font-weight: bold;
      animation: fadeIn 0.5s ease-in-out;
      transition: all 0.3s ease-in-out;

      &:hover {
        background-color: rgb(171, 171, 171);
        box-shadow: var(--el-box-shadow-light);
      }
    }
    @keyframes moveLeft {
      from { transform: translateX(0); }
      to { transform: translateX(-50vw); }
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}
</style>
